<template>
    <!-- home下的健康 -->
    <div class="health">
        <div class="head">
            <div class="page">
               <span></span> 
               <h3>用科技管理健康</h3>
               <p>健康信息采集，健康检测。健康评估个性化健康管理方案</p>
               <div>
                   <img src="../../img/healthimg/1.png" alt="">
                   <img src="../../img/healthimg/2.png" alt="">
                   <img src="../../img/healthimg/3.png" alt="">
                   <img src="../../img/healthimg/4.png" alt="">
               </div>
            </div>
        </div>
        <div class="healthmanage">
            <Title title="健康管理" text="Health management" />
            <div class="page">
                <img src="../../img/healthimg/bg.png" alt="">
            </div>       
            <div class="timeline">
                <div class="page">
                    <div class="con">
                        <img src="../../img/healthimg/img.png" alt="">
                        <p><span></span></p>
                        <div>
                            <h3>基础健康数据采集</h3>
                            <p>24小时高频次采集用户心电、心率、血压、血氧、HRV、睡眠等基础健康数据，并自动上传至体安APP</p>
                        </div>
                    </div>
                    <div class="con">
                        <img src="../../img/healthimg/img2.png" alt="">
                        <p><span></span></p>
                        <div>
                            <h3>健康报告</h3>
                            <p>根据大数据算法和健康风险评估模型，对用户健康数据进行分析，形成健康报告，每日发送到客户端APP</p>
                        </div>
                    </div>
                    <div class="con">
                        <img src="../../img/healthimg/img3.png" alt="">
                        <p><span></span></p>
                        <div>
                            <h3>中医调理方案</h3>
                            <p>健康管理师和医生将根据系统产生的健康体检报告，为用户分析解读健康状态，并制定适合用户的中医调理方案，从膳食，运动和心理等方面进行指导，改善用户身体状态。</p>
                        </div>
                    </div>
                </div>                
            </div>
        </div>
        <div class="cure">
            <div>
                20000 +
                <p>主治在线</p>
            </div>
            <div>
                300 +
                <p>三甲诊疗</p>
            </div>
        </div>
        <div class="service">
            <Title title="医疗服务" text="Medical services" />
            <div class="page medical">
                <dl>
                    <dt><img src="../../img/healthimg/b-img.png" alt=""></dt>
                    <dd>
                        <h4>线上轻问诊</h4>
                        <p>当用户检测出身体健康数据有异样时，可通过线上问诊形式，向全国知名医生进行咨询，及时了解问题。</p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../img/healthimg/b-img1.png" alt=""></dt>
                    <dd>
                        <h4>线下深度诊疗</h4>
                        <p>若用户身体问题较为严重，需到医院诊疗,可通过体安APP向全国三甲医院快速挂号，免去排队、无号等看病难问题。</p>
                    </dd>
                </dl>
                <dl>
                    <dt><img src="../../img/healthimg/b-img2.png" alt=""></dt>
                    <dd>
                        <h4>术后康复照护</h4>
                        <p>健康照护师为术后人员提供照护，实施预防、康复及照护措施或提出送医建议;提供合理营养、适宜运动、心理疏导及生活照料服务。</p>
                    </dd>
                </dl>
            </div>
            <Title title="医疗团队" text="The medical team" />
            <div class="page team">
                <div>
                    <div class="imgbox">
                        <img src="../../img/healthimg/tuandui.png" alt="">
                    </div>                    
                    <h4>体安自有团队</h4>
                    <p>健康管理师</p>
                    <p>心理辅导师</p>
                </div>
                <div>
                    <div class="imgbox">
                        <img src="../../img/healthimg/yis.png" alt="">
                    </div>                    
                    <h4>专业医师</h4>
                    <p>21000位三甲主治医师</p>
                    <p>医疗专家</p>
                </div>
                <div>
                    <div class="imgbox">
                        <img src="../../img/healthimg/sanjia.png" alt="">
                    </div>                    
                    <h4>三甲医院</h4>
                    <p>340家临床与科研</p>
                    <p>兼优的三甲医院</p>
                </div>
            </div>
        </div>
        <div class="service-vip">
            <p>提升会员体系</p>
            <p>服务800万会员</p>
        </div>
        <div class="experience">
            <Title title="产品体验+医疗服务" text="The medical team" />
            <p>在健康中心内，用户不仅可以亲身体验体安智能穿戴产品、家厨净化产品、药食同源产品等全系列</p>
            <p>产品，还可进行精准的自助体检以及辅助睡眠等服务。</p>
            <div class="page medical_img">
                <div class="imglist">
                    <img src="../../img/healthimg/cpty-img.png" alt="">
                    <div class="mark">
                        <!-- 蒙层内容 -->
                    </div>
                </div>
                <div class="imglist">
                    <img src="../../img/healthimg/cpty-img2.png" alt="">
                    <div class="mark"></div>
                </div>
                <div class="imglist">
                    <img src="../../img/healthimg/cpty-img3.png" alt="">
                    <div class="mark"></div>
                </div>
                <div class="imglist">
                    <img src="../../img/healthimg/cpty-img6.png" alt="">
                    <div class="mark"></div>
                </div>
                <div class="imglist">
                    <img src="../../img/healthimg/cpty-img4.png" alt="">
                    <div class="mark"></div>
                </div>
                <div class="imglist">
                    <img src="../../img/healthimg/cpty-img5.png" alt="">
                    <div class="mark"></div>
                </div>
            </div>
            
        </div>
        <div class="medicine">
            <p>“将中医五行概念融入旅行</p>
            <p>康养中于旅行中康养身心”</p>
        </div>
        <div class="culture">
            <div class="page recuperate">
                <dl>
                    <dt>
                        <img src="../../img/healthimg/22.png" alt="">
                    </dt>
                    <dd>
                        <h3>“因时因地制宜治则”原则</h3>
                        <p>五行康养性地根据中医“四时园地制宜治财”原则，按照季节、地区以及人体的体质年龄不同，为客户提供适合自身的本养胜地和定制化调理方案</p>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../../img/healthimg/22222.png" alt="">
                    </dt>
                    <dd>
                        <h3>康养胜地</h3>
                        <p>汕尾市海丰县莲花第-山温泉水系康养胜地</p>
                        <p>广州市增城区仙集大健康木系康养胜地</p>
                        <p>赣州市龙南市长寿村火系康养胜地三个五行康养圣地</p>
                    </dd>
                </dl>
            </div>
            <Title title="修养方式" text="Cultivation way" />
            <div class="page footimg">
                <div>
                    <img src="../../img/healthimg/changzhushi.png" alt="">
                    <p>长住式(疗养身心)</p>
                </div>
                <div>
                    <img src="../../img/healthimg/duanzhushi.png" alt="">
                    <p>短住式(休闲养生)</p>
                </div>
                <div>
                    <img src="../../img/healthimg/xiuqishi.png" alt="">
                    <p>休憩式(放松身心)</p>
                </div>
            </div>                
        </div>
    </div>
  
</template>

<script>
import Title from '../../components/Title'
export default {
    components: {
        Title
    }
}
</script>

<style lang='scss' scoped>
.health{
    background: #2443ad;
}
.head{
    width: 100%;
    height: 650px;
    background: url(../../img/healthimg/big.png) no-repeat;
    background-size: 100%;
    padding-top: 100px;
    span{
        display: block;
        width: 100px;
        height: 4px;
        background: #65fdf4;
    }
    h3{
        color: #65fdf4;
        font-size: 50px;
        line-height: 130px;
    }
    p{
        font-size: 14px;
        color: #fff;
        opacity: 0.8;
    }
    div div{
        padding-top: 30px;
    }
    img{
        width: 85px;
        &+img{
            margin-left: 20px;
        }
    }
}
.healthmanage{
    width: 100%;
    background: #3251bf;
    color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    &::before{
        content: "";
        position: absolute;
        width: 120%;
        height: 400px;
        border-radius: 50%;
        left: -10%;
        top: -250px;
        background: #3251bf;
        z-index: -1;
    }
    &::after{
        content: "";
        position: absolute;
        width: 120%;
        height: 500px;
        border-radius: 50%;
        left: -10%;
        bottom: -240px;
        background: #3251bf;
        z-index: -1;
    }
    .page>img{
        padding-bottom: 50px;
    }

}
.con{
    display: flex;
    align-items: center;
    &+.con{
        margin-top: 50px;
        >p{
            &::before{
                content: "";
                position: absolute;
                width: 4px;
                height: 470px;
                background: #65fdf4;
                left: 13px;
                bottom: 100%;
            }
        }
    }
    &:nth-child(2){
        flex-flow: row-reverse;
        >div{
            padding-left: 80px;
            padding-right: 0;
            text-align: right;
        }
    }
    img{
        width: 600px;
        height: 450px;
    }
    >P{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #fff;
        margin: 0 35px;
        position: relative;
        span{
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #65fdf4;
            margin: 10px;
        }
    }
    >div{
        width: 600px;
        height: auto;
        padding-right: 80px;
        padding-bottom: 30px;
        text-align: left;
        h3{
            font-size: 30px;
            height: 80px;
            font-weight: 550;
            line-height: 80px;            
        }
        p{
            line-height: 36px;
            font-size: 16px;
            opacity: 0.8;
        }
    }
}
.cure{
    width: 100%;
    height: 800px;
    background: url(../../img/healthimg/big-bg.png) no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    div{
        width: 300px;
        height: 300px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 46px;
        p{
            font-size: 36px;
        }
        &:nth-child(1){
            background: rgba($color: #1e3ca3, $alpha: 0.6);
        }
        &:nth-child(2){
            background: rgba($color: #70e4e9, $alpha: 0.6);
        }
    }
}
.service{
    width: 100%;
    padding-top: 150px;
    .medical{
        display: flex;
        padding-bottom: 100px;
    }
    dl{
        width: 420px;
        border-radius: 10px;
        overflow: hidden;
        img{
            width: 420px;
            height: 400px;
        }
        dd{
            background: #fff;
            padding: 0 30px 20px;
            h4{
                line-height: 70px;
                font-size: 24px;
                text-align: center;
            }
            p{
                line-height: 28px;
            }
        }
        &+dl{
            margin-left: 20px;
        }
    }
}
.team{
    display: flex;
    padding-bottom: 150px;
    text-align: center;
    color: #fff;
    >div{
        flex: 1;
    }
    .imgbox{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        line-height: 200px;
        margin: 0 auto;
        cursor: pointer;
        &:hover{
            background: #65fdf4;
        }
    }
    h4{
        line-height: 100px;
        font-size: 28px;
    }
    p{
        line-height: 30px;
    }
}
.service-vip{
    width: 100%;
    height: 800px;
    background: url(../../img/healthimg/bgg.png) no-repeat;
    background-size: 100%;
    text-align: center;
    color: #fff;
    font-size: 50px;
    font-weight: 600;
    line-height: 80px;
    padding-top: 300px;
}
.experience{
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 100px 0;
    .medical_img{
        padding-top: 70px;
        display: flex;
        flex-wrap: wrap;
    }
    >p{
        line-height: 40px;
        font-size: 20px;
        opacity: 0.8;
    }
    .imglist{
        width: 433px;
        height: 560px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        &:hover .mark{
            top: 0;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .mark{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 40px;
            background: rgba($color: #337f7a, $alpha: 0.6);
            transition: top 0.2s linear;
        }
    }
}
.medicine{
    width: 100%;
    height: 700px;
    background: url(../../img/healthimg/bg2.png) no-repeat;
    background-size: 100%;
    color: #fff;
    text-align: center;
    font-size: 60px;
    font-weight: 700;
    line-height: 100px;
    padding-top: 240px;
    p{
        &:nth-child(1){
            margin-left: -60px;
        }
        &:nth-child(2){
            margin-right: -60px;
        }
    }
}
.culture{
    width: 100%;
    .recuperate{
        padding: 70px 0 130px;
    }
    dl{
        display: flex;
        height: 430px;
        align-items: center;
        color: #fff;
        justify-content: center;
        &:nth-child(2){
            flex-flow: row-reverse;
            dd{
                text-align: right;
            }
        }
        dt{
            width: 570px;
            height: 100%;
            img{
                width: 100%;
                height: 100%;
            }
        }
        dd{
            width: 570px;
            padding: 0 50px;
            h3{
                font-size: 30px;
                font-weight: 600;
                line-height: 80px;
            }
            p{
                line-height: 40px;
                opacity: 0.8;
            }
        }
    }    
    .footimg{
        display: flex;
        padding: 50px 0 100px;
        div{
            width: 420px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            &+div{
                margin-left: 20px;
            }
            img{
                width: 100%;
            }
            p{
                line-height: 80px;
            }
        }
    }
}
</style>